<template>
	<div>
		<r-search ref="search" :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"
			:inline="true" />
		<div>
			<el-button v-if="isRole == 'agent'" type="success" round @click="dialogFormVisible = true">提现</el-button>

			<el-dialog title="提现" :visible.sync="dialogFormVisible">
				<el-form :model="isForm">
					<el-form-item label="银行名称：" :label-width="formLabelWidth">
						<el-input v-model="isForm.name" autocomplete="off" placeholder="请填写银行卡名称" type="text">
						</el-input>
					</el-form-item>
					<el-form-item label="开户行：" :label-width="formLabelWidth">
						<el-input v-model="isForm.address" autocomplete="off" placeholder="请填写此银行卡的开户行地址" type="text">
						</el-input>
					</el-form-item>
					<el-form-item label="电话：" :label-width="formLabelWidth">
						<el-input v-model="isForm.phone" autocomplete="off" placeholder="请填写此银行卡在该银行的预留电话" type="phone">
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="isFormEvent">申请提现</el-button>
				</div>
			</el-dialog>
		</div>


		<r-table :isPagination="true" :isHandle="true" :tableData="tableData" :tableCols="tableCols"
			:tablePage="pagination" :loading="tableLoading" :tableHandles="tableHandles" :isSelection="false"
			@refresh="page()" />

		<r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
			labelWidth="100px" dialogWidth="500px" :isHandle="true" />
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			//提现按钮打开的form表单
			isRole: '',
			dialogFormVisible: false,
			isForm: {
				name: '',
				address: '',
				phone: '',
			},
			formLabelWidth: '120px',


			searchData: {
				agentName: '',
				agentPhone: '',
				status: '',
				beginTime: '',
				endTime: '',
			},
			searchForm: [
				{ type: 'input', placeholder: '代理商名称', prop: 'agentName', width: 200, isShow: e => sessionStorage.role == 'operator' },
				{ type: 'input', placeholder: '手机号', prop: 'agentPhone', width: 200, isShow: e => sessionStorage.role == 'operator' },
				// {
				// 	type: 'daterange',
				// 	placeholder: '申请时间',
				// 	prop: 'date',
				// 	width: 300,
				// 	change: e => {
				// 		if (e) {
				// 			this.searchData.beginTime = e[0]
				// 			this.searchData.endTime = e[1]
				// 		} else {
				// 			this.searchData.beginTime = ''
				// 			this.searchData.endTime = ''
				// 		}
				// 	}
				// },
				{
					type: "date", placeholder: "开始日期", prop: "beginTime", width: 170, change: (val) => { this.searchData.beginTime = val }
				},
				{
					type: "date", placeholder: "结束日期", prop: "endTime", width: 170, change: (val) => { this.searchData.endTime = val }
				},
				{
					type: 'select',
					placeholder: '审核结果',
					prop: 'status',
					width: 200,
					options: [{ label: '待审核', value: '1' }, { label: '已通过', value: '2' }, { label: '不通过', value: '3' }]
				}
			],
			searchHandle: [
				{ type: 'primary', label: '搜索', handle: e => this.getData() }
				// {type:'primary',label:'重置', handle: e => this.elFormSubmit(),}
			],
			tableLoading: false,
			tableData: [{}],
			tableCols: [
				{ label: 'ID', prop: 'id' },
				{
					label: '代理商名称',
					prop: 'agentName',
					isShow: e => sessionStorage.role == 'operator'
				},
				// { label: "代理商联系人", prop: "nickName",  },
				{
					label: '代理商手机号',
					prop: 'agentPhone',
					isShow: e => sessionStorage.role == 'operator'
				},
				{ label: '提现金额', prop: 'money' },
				{ label: '提现信息', prop: 'openId' },
				// { label: "当前余额", prop: "isVip_des",  },
				{ label: '申请时间', prop: 'ctime' },
				{ label: '提现到账时间', prop: 'checkTime' },
				{
					label: '审核结果',
					prop: 'status',
					formatter: e => {
						if (e.status == 1) {
							return '待审核'
						} else if (e.status == 2) {
							return '已通过'
						} else if (e.status == 3) {
							return '不通过'
						}
					}
				},
				{
					label: '操作',
					type: 'button',
					width: 200,
					isShow: e => sessionStorage.role == 'operator',
					btnList: [
						{
							label: '通过',
							type: 'text',
							handle: row => {
								this.$confirm('确定通过提现申请吗?', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								})
									.then(async () => {
										const res = await this.apis.withdrawRecord_check({
											id: row.id,
											status: 2
										})

										this.$message({
											message: '操作成功！',
											type: 'success'
										})
										this.getData()
									})
									.catch(() => { })
							}
						},
						{
							label: '驳回',
							type: 'text',
							handle: row => {
								this.formData.money = ''
								this.formData.id = row.id
								this.formData.money = row.money
								this.elFormVisible('驳回')
							}
						}
					]
				}
			],
			tableHandles: [
				// {
				//   label: "数据导出",
				//   type: "primary",
				//   handle: e => this.elFormVisible()
				// },
			],
			pagination: { limit: 10, offset: 1, total: 1 },

			checkBox: [],

			formData: {
				id: '',
				status: 3,//1待审核，2通过 ，3不通过
				rejectReason: '',
				money: ''
			},
			formCols: [{ type: 'input', label: '驳回原因', width: 350, prop: 'rejectReason', rmblock: true, remark: '' }],
			formRules: {
				rejectReason: [{ required: true, message: '请输入', trigger: 'blur' }]
			},
			formHandle: [
				{
					label: '取消',
					handle: e => this.elFormVisible()
				},
				{
					label: '确定',
					type: 'success',
					handle: e => {
						console.log(444444444, e);
						this.elFormSubmit()
					}
				}
			]
		}
	},
	watch: {},
	created() {
		this.isRole = sessionStorage.role
	},
	mounted() {
		this.getData()
	},
	methods: {
		// 打开提现form表单
		isFormEvent() {
			this.dialogFormVisible = false
			console.log(1111, this.isForm.name, this.isForm.address, this.isForm.phone);
		},
		async getData() {
			var res = await this.apis.withdrawRecord_list({
				agentPhone: this.searchData.agentPhone,
				agentName: this.searchData.agentName,
				status: this.searchData.status,
				beginTime: this.searchData.beginTime,
				endTime: this.searchData.endTime,
				pageNum: this.pagination.offset,
				pageSize: this.pagination.limit
			})
			console.log(res)
			var list = res.rows || []
			this.tableData = list
			this.pagination.total = res.total
		},
		async elFormSubmit(row) {
			console.log(22222, row);
			this.$refs.elForm.$refs.ruleForm.validate(async valid => {
				if (valid) {
					const res = await this.apis.withdrawRecord_check(this.formData)

					this.$message({
						message: '操作成功！',
						type: 'success'
					})
					this.getData()
					setTimeout(() => {
						this.elFormVisible()
					}, 1000)

				}
			})
		},
		page() {
			this.getData()
		}
	}
}
</script>

<style scoped lang="scss">
:deep .el-dialog {
	width: 35% !important;

	input {
		width: 85%;
	}
}
</style>
